<!DOCTYPE html>
<html>

<head>
    <title>毕业季</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="shortcut icon" href="https://youth.sdut.edu.cn/favicon.ico">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- <script src="//api.html5media.info/1.2.2/html5media.min.js"></script> -->
    <link rel="stylesheet" href="css/index.css">
</head>
<script>
    // // 定义事件侦听器函数
    function displayWindowSize() {
        // 获取窗口的宽度和高度，不包括滚动条
        var wid = document.documentElement.clientWidth;
        var hei = document.documentElement.clientHeight;
        console.log(wid);
        if (wid > 500) {
            window.location.href = "../index.html";
        }
    }
    // 将事件侦听器函数附加到窗口的resize事件
    window.addEventListener("resize", displayWindowSize);
    // 第一次调用该函数
    displayWindowSize();
</script>

<body>

    <div class="container-fluid">
        <div class="colum">
            <div class="nav">
                <div class="navLeft">
                    <img src="../images/logo.webp" alt="">
                </div>
                <div class="navMiddle"></div>
                <div class="navRight" onclick="show()">
                    <div class="navTop"></div>
                    <div class="navMiddle"></div>
                    <div class="navBottom"></div>
                </div>
            </div>
            <div id="navRightMenu">
                <div class="menu" onclick="hid()">
                    <a href="#qcbs">
                        <p>青春不散</p>
                    </a>
                </div>
                <div class="menu" onclick="hid()">
                    <a href="#qcjy">
                        <p>青春记忆</p>
                    </a>
                </div>
                <div class="menu" onclick="hid()">
                    <a href="#qcjyg">
                        <p>青春剪影</p>
                    </a>
                </div>
                <div class="menu" onclick="hid()">
                    <a href="#qclc">
                        <p>青春列车</p>
                    </a>
                </div>
            </div>
            <div class="banner">
                <div class="textWrap">
                    <p>
                        又是一年毕业季
                    </p>
                    <p class="wrap_text2">
                        ——明天，你好
                    </p>
                </div>
            </div>
            <div class="separateContent">
                <p id="qcbs" class="separate">青春不散</p>
            </div>
            <div class="videoContent">
                <div class="ctrlContent">
                    <div id="vdConLi1" class="leftCtrl" onclick="LiBorder1('../movie/ttogosuot.mp4')"><span>视频一</span>
                    </div>
                    <div id="vdConLi2" class="rightCtrl" onclick="LiBorder2('../movie/ttogosuot.mp4')"><span>视频二</span>
                    </div>
                </div>
                <video controls autoplay="true" style="width: 100%;height:100%;object-fit:fill"></video>
            </div>
            <div class="separateContent">
                <p id="qcjy" class="separate">青春记忆</p>
            </div>
            <div class="phoneContent">
                <div class="phoneTop">
                    <img src="../images/pnoneTop.webp" alt="">
                </div>
                <div class="phoneMiddle">
                    <div class="chatContent">
                        <div class="leftChat">
                            <div class="userHead1"></div>
                            <div class="chatContentWrap">
                                <div class="leftAngle"></div>
                                <div class="leftChatWrap">
                                    <span>
                                        以前不住校，高三每天6点半骑自行车上学，23点放学骑回家，一天17个小时。放学后还不想回家，大半夜闲逛。现在我必须住校，每年初春新秋坐火车上学，仲夏大寒卧铺回家，算一算，300天。
                                        <br> 于是，我知道什么叫想家。
                                        </apan>
                                </div>
                            </div>
                        </div>
                        <div class="rightChat">
                            <div class="userHead3Content">
                                <div class="userHead3"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div>
                                    <div class="rightAngle"></div>
                                </div>
                                <div class="rightChatWrap">
                                    <span>
                                        大学前我和同桌上课拉过手，掐过腿。现在我的旁边每节课是不同的面孔，打了招呼，下课却忘记了这张脸。
                                        <br> 于是，我听懂了《同桌的你》。
                                    </span>
                                </div>

                            </div>

                        </div>
                        <div class="leftChat">
                            <div class="userHead2"></div>
                            <div class="chatContentWrap">
                                <div class="leftAngle"></div>
                                <div class="leftChatWrap">
                                    <span>
                                        父母送我去大学报到，临走的时候，我妈来和我告别，我问我爸呢，我妈说“你爸怕你哭，就没来。”大二暑假我回家，我妈无意中说“其实你爸当时就在马路对面。你转身进学校，你爸就哭了。”

                                        <br> 于是，我懂了，在成长面前，爸爸也是脆弱的。
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="rightChat">
                            <div class="userHead3Content">
                                <div class="userHead4"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div>
                                    <div class="rightAngle"></div>
                                </div>
                                <div class="rightChatWrap">
                                    <span>
                                        刚上大一时候，一个室友在卫生巾室友怂恿下果断踹了在外地的现任女友，坐了2个小时地铁去松江向另一女生表白，无奈惨痛被拒。大学过半，至今仍孤身一人。
                                        <br> 　　于是，我懂了，在没有确定下家之前，不要放了上家。
                                    </span>
                                </div>

                            </div>

                        </div>
                        <div class="leftChat">
                            <div class="userHead5"></div>
                            <div class="chatContentWrap">
                                <div class="leftAngle"></div>
                                <div class="leftChatWrap">
                                    <span>大一的时候有一次拉肚子，给妈妈打电话不停地诉苦。
                                        　　大二时我一个室友打球咬掉了一块舌头，缝上了，有一段时间不能说话。后来我问他你妈知道么，他说没告诉，怕她担心。<br>　　于是，我懂了，我的痛苦会被距离放大，千里之外，妈妈比我更痛苦。
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="rightChat">
                            <div class="userHead3Content">
                                <div class="userHead6"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div>
                                    <div class="rightAngle"></div>
                                </div>
                                <div class="rightChatWrap">
                                    <span>大学之前，自己只管学习，脏衣服一扔有人洗，饿了张嘴有饭吃。那时候我还嫌衣服少，饭不好吃。
                                        　　上了大学，看着床底下塞得一坨坨的脏衣服，捶了捶腰只能继续一件一件地洗。盯着食堂的饭菜，叹了叹气，只能硬着头皮往下咽。
                                        <br>　　于是，懂了，以为平平常常的东西，等自己完全承担了，就觉得不那么容易了。
                                    </span>
                                </div>
                            </div>

                        </div>
                        <div class="leftChat">
                            <div class="userHead3Content">
                                <div class="userHead7"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div class="leftAngle"></div>
                                <div class="leftChatWrap">
                                    <span>
                                        以前不住校，高三每天6点半骑自行车上学，23点放学骑回家，一天17个小时。放学后还不想回家，大半夜闲逛。现在我必须住校，每年初春新秋坐火车上学，仲夏大寒卧铺回家，算一算，300天。
                                        <br> 于是，我知道什么叫想家。
                                        </apan>
                                </div>
                            </div>
                        </div>
                        <div class="rightChat">
                            <div class="userHead3Content">
                                <div class="userHead10"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div>
                                    <div class="rightAngle"></div>
                                </div>
                                <div class="rightChatWrap">
                                    <span>
                                        大学之前，自己只管学习，脏衣服一扔有人洗，饿了张嘴有饭吃。那时候我还嫌衣服少，饭不好吃。
                                        　　上了大学，看着床底下塞得一坨坨的脏衣服，捶了捶腰只能继续一件一件地洗。盯着食堂的饭菜，叹了叹气，只能硬着头皮往下咽。
                                        <br> 　　于是，懂了，以为平平常常的东西，等自己完全承担了，就觉得不那么容易了。

                                    </span>
                                </div>

                            </div>

                        </div>
                        <div class="leftChat">
                            <div class="userHead11"></div>
                            <div class="chatContentWrap">
                                <div class="leftAngle"></div>
                                <div class="leftChatWrap">
                                    <span>
                                        高中时候上课偷摸看个《青年文摘》、《当代歌坛》，惬意得不得了。一边看着小说，一边提防着老师，看得也不亦乐乎。
                                        　　上了大学，有次偶然经过报亭，买了本《青年文摘》，给了老板三块，老板说三块五。我问什么时候涨了的，老板说涨了有一年多了。我才发现，大学之后，再没买过《青年文摘》。
                                        　<br>　于是，我懂得，是不是有些老友和快乐我们慢慢忘记了?

                                        </apan>
                                </div>
                            </div>
                        </div>
                        <div class="rightChat">
                            <div class="userHead3Content">
                                <div class="userHead12"></div>
                            </div>
                            <div class="chatContentWrap">
                                <div>
                                    <div class="rightAngle"></div>
                                </div>
                                <div class="rightChatWrap">
                                    <span>
                                        大一下学期的时候给妈妈打电话，有段时间她没说几句就放了电话，她说她在打麻将。
                                        　　寒假回家的时候我爸告诉我，其实妈妈那段时间正在住院。半个月里，每次接我电话之前，她就叫病房里的人不要说话，也不敢和我聊很长时间，怕露馅。
                                        <br>　　于是，我懂得，有时候，隐瞒也是一种爱。

                                    </span>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="phoneBottom">
                    <img src="../images/pnoneBottom.webp" alt="">
                </div>
            </div>
            <div class="separateContent">
                <p id="qcjyg" class="separate">青春剪影</p>
            </div>
            <div class="separatedContent">
                <div class="separatedContentWrap">
                    <div class="separateContent1"></div>
                    <span>回忆录</span>
                </div>
                <div class="separateContent2"></div>
            </div>
            <div>
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                        <li data-target="#demo" data-slide-to="3"></li>
                        <li data-target="#demo" data-slide-to="4"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="5"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="6"></li>
                        <li data-target="#demo" data-slide-to="7"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="8"></li>
                    </ul>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="../images/p7.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p8.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p9.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p1.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p2.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p3.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p4.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p5.webp">
                        </div>
                        <div class="carousel-item">
                            <img src="../images/p6.webp">
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>
            </div>
            <div class="separatedContent">
                <div class="separatedContentWrap">
                    <div class="separateContent1"></div>
                    <span>毕业了</span>
                </div>
                <div class="separateContent2"></div>
            </div>
            <div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../images/9.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/5.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/1.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/8.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/3.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/7.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/6.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/4.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/2.webp">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>

            </div>
            <div class="separateContent">
                <p id="qclc" class="separate">青春列车</p>
            </div>
            <div>
                <div class="trainContent">
                    <div class="trainContentImg">
                        <img src="../images/postgraduate.webp" alt="">
                    </div>
                    <div class="trainTextWrap">
                        <p>考研篇</p>
                        <span>我觉得对于大多数学科来讲，本科毕业后还是先考研比较好。因为目前国内在本科阶段的教育实际上还是与之前的高中教育一样，是属于知识普及型的<a
                                href="http://kaoyan.eol.cn/kao_yan_za_tan_3914/20091014/t20091014_412723.shtml">
                                …[详细]</a></span>
                    </div>
                </div>
                <hr>
                <div class="trainContent">
                    <div class="trainContentImg">
                        <img src="../images/male.webp" alt="">
                    </div>
                    <div class="trainTextWrap">
                        <p>考公篇</p>
                        <span>公考是一段苦哈哈的过程，看得见的是一朝成名俱不辜负，看不见的万卷诗书十年寒窗。毛姆说“只有诗人和圣徒才能坚信，在沥青路面上辛勤浇水<a
                                href="http://kaoyan.eol.cn/bao_kao/jing_yan_jiao_liu/201507/t20150706_1285086_2.shtml">
                                …[详细]</a></span>
                    </div>
                </div>
                <hr>
                <div class="trainContent">
                    <div class="trainContentImg">
                        <img src="../images/employment.webp" alt="">
                    </div>
                    <div class="trainTextWrap">
                        <p>就业篇</p>
                        <span>学习不是目的，工作才是根本。现在的实际情况是：大学培养的许多毕业生虽然都很听话，学习很用功，但却缺乏创造力和独立思考，更欠缺JUST DO IT
                            的执行力。所以我个人<a
                                href="http://kaoyan.eol.cn/kao_yan_za_tan_3914/20091014/t20091014_412676.shtml">
                                …[详细]</a></span>
                    </div>
                </div>
                <hr>
                <div class="trainContent">
                    <div class="trainContentImg">
                        <img src="../images/entrepreneurship.webp" alt="">
                    </div>
                    <div class="trainTextWrap">
                        <p>创新篇</p>
                        <span>随着我国走向转型化进程及社会就业压力加剧，创业逐渐成为大学生的一种职业选择方式。大学生作为我国年轻高级知<a
                                href="http://shaanxi.eol.cn/shannxihot/201605/t20160518_1399396.shtml"> …[详细]</a></span>
                    </div>
                </div>
            </div>
            <div class="separateContent">
                <p class="separate endCon"> <strong>结束语</strong></p>
            </div>
            <div class="endConclusion">
                <p>
                    六月炎炎诵离别，夏雨丝丝吟愁殇。<br>
                    毕业照定格住的，是灿烂的笑脸；宿舍中沉淀的，是往昔的点点滴滴。<br>
                    床边的小熊，你是否还每天晚上抱着它入眠；墙角的篮球，是否还有让你心情变好的魔力。<br>
                    相离莫相忘，且行且珍惜。<br>
                    再见了相互嫌弃的老同学，再见了来不及说出的谢谢，再见了不会再有的留堂作业，再见了我留给你毕业册的最后一页。
                </p>
            </div>
            <div class="bottom">
                <div>
                    <p>
                        <strong>
                            策划：姜小凤、刘世宝、夏楚翘&nbsp;&nbsp;&nbsp;美工：李正远&nbsp;&nbsp;&nbsp;程序：房杰祥
                        </strong>
                    </p>
                </div>
                <div>
                    <span class="copyRight">山东理工大学学生工作部（处）、武装部　青春在线网站版权所有
                    </span>
                </div>

            </div>
            <!-- colum -->
        </div>

    </div>
    <script>

    </script>
    <script src="js/main.js"></script>
    <script src="../js/swiper.min.js"></script>
</body>

</html>